<template>
  <view class="container">
    <!-- 背景效果 - 简化背景 -->
    <view class="background-overlay"></view>
    
    <!-- 固定区域：包含日历选择器和统计卡片 -->
    <view class="fixed-content">
      <!-- 滚动日历选择器 -->
      <view class="date-section">
        <view class="date-header">
          <text class="section-title">{{ formatDateDisplay(currentDate) }}</text>
          <view class="header-actions">
            <button class="action-btn chart-btn" @click="navigateToTrendChart">
              <text class="action-text">趋势</text>
            </button>
            <button class="action-btn lab-btn" @click="navigateToBottleDemo">
              <text class="action-text">实验室</text>
            </button>
            <button class="action-btn ai-btn" @click="navigateToAIAssistant">
              <text class="action-text">AI</text>
            </button>
          </view>
        </view>

        <!-- 使用日期滚动日历组件 -->
        <date-scroll-calendar v-model="currentDate" @change="onDateChange"></date-scroll-calendar>
      </view>
      
      <!-- 今日统计概览 - 使用stats-card组件 -->
      <stats-card 
        :count="records.length"
        :total-amount="totalAmount"
        :breast-milk-total="dailyBreastMilkTotal"
        :formula-milk-total="dailyFormulaMilkTotal"
      />
    </view>

    <!-- 可滚动区域：只有记录列表可滚动 -->
    <view class="scrollable-content">
      <!-- 历史记录区域 - 使用milk-history组件 -->
      <milk-history
        :records="records"
        :is-refreshing="isRefreshing"
        :current-time="currentTime"
        @add-record="navigateToFeedingRecord"
        @refresh="refreshRecords"
        @edit-record="editRecord"
      />
    </view>

    <!-- 编辑记录模态框 -->
    <uni-popup ref="editPopup" type="dialog">
      <view class="edit-modal">
        <view class="modal-header">
          <text class="modal-title">编辑记录</text>
          <button class="close-btn" @click="closeEditModal">✕</button>
        </view>
        <view class="modal-content">
          <view class="input-group">
            <text class="label">喝奶量 (ml)</text>
            <input type="number" v-model="editingRecord.amount" placeholder="请输入喝奶量（1-999ml）" class="input" placeholder-class="input-placeholder" :maxlength="3" @input="validateEditAmount" />
          </view>
          <view class="input-group">
            <text class="label">喂养类型</text>
            <view class="feeding-type-tabs">
              <view v-for="(tab, index) in feedingTabs" :key="tab.type" class="feeding-tab" :class="{ 'active': editingRecord.feeding_type === tab.type }" @click="editingRecord.feeding_type = tab.type">
                <text class="tab-text">{{ tab.name }}</text>
                <view v-if="editingRecord.feeding_type === tab.type" class="tab-active-indicator"></view>
              </view>
            </view>
          </view>
          <!-- 选择时间 -->
          <view class="form-section">
            <text class="form-label">喂养时间</text>
            <picker mode="time" :value="editingRecord.time" @change="onTimeChange">
              <view class="time-picker">
                <text class="time-text">{{ editingRecord.time }}</text>
                <text class="time-arrow">▼</text>
              </view>
            </picker>
          </view>
          <view class="input-group">
            <text class="label">备注</text>
            <textarea v-model="editingRecord.notes" placeholder="添加备注信息..." class="textarea" placeholder-class="textarea-placeholder" />
          </view>
        </view>
        <view class="modal-buttons">
          <button class="delete-btn" @click="deleteRecord">删除</button>
          <button class="save-btn" @click="saveEditedRecord">保存修改</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import StatsCard from '@/components/stats-card/stats-card.vue'
import MilkHistory from '@/components/milk-history/milk-history.vue'
import DateScrollCalendar from '@/components/date-scroll-calendar/date-scroll-calendar.vue'

export default {
  name: 'MilkRecord',
  components: {
    StatsCard,
    MilkHistory,
    DateScrollCalendar
  },
  data() {
    return {
      currentDate: '', // 当前选择的日期
      records: [], // 记录列表
      editingRecord: {}, // 正在编辑的记录
      isRefreshing: false, // 是否正在刷新

      // 自动刷新相关
      autoRefreshTimer: null, // 自动刷新定时器
      timeUpdateTimer: null, // 时间更新定时器
      currentTime: new Date(), // 当前时间，用于计算时间间隔
      feedingTabs: [
        { name: '喝母乳', type: 'bottle_breast' },
        { name: '喝奶粉', type: 'bottle_formula' }
      ]
    }
  },
  computed: {
    totalAmount() {
      return this.records.reduce(
        (sum, record) => sum + parseInt(record.amount),
        0
      )
    },
    
    dailyBreastMilkTotal() {
      const breastMilkRecords = this.records.filter(
        (record) => record.feeding_type === 'bottle_breast'
      )
      return breastMilkRecords.reduce(
        (sum, record) => sum + parseInt(record.amount),
        0
      )
    },

    dailyFormulaMilkTotal() {
      const formulaMilkRecords = this.records.filter(
        (record) => record.feeding_type === 'bottle_formula'
      )
      return formulaMilkRecords.reduce(
        (sum, record) => sum + parseInt(record.amount),
        0
      )
    }
  },
  mounted() {
    // 初始化页面
  },
  beforeDestroy() {
    // 清理自动刷新定时器
    this.stopAutoRefresh()
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    // 页面显示时启动自动刷新
    this.currentTime = new Date()
    this.startAutoRefresh()
    this.refreshRecords() // 关键：每次页面显示都刷新
    // 监听刷新事件
    uni.$on('refreshRecords', this.refreshRecords)
  },
  onHide() {
    // 页面隐藏时停止自动刷新
    this.stopAutoRefresh()
    // 解绑刷新事件，防止重复绑定
    uni.$off('refreshRecords', this.refreshRecords)
  },
  methods: {
    // 初始化页面
    initPage() {
      try {
        const today = new Date();
        console.log('系统日期:', today);
        
        // 检查系统日期是否看起来合理（年份在2020-2030之间）
        if (today.getFullYear() < 2020 || today.getFullYear() > 2030) {
          console.warn('系统日期可能不正确:', today);
          // 使用硬编码的合理日期
          const fixedDate = new Date(2023, 6, 16); // 2023年7月16日
          this.currentDate = this.formatDateForInput(fixedDate);
          console.log('使用固定日期:', this.currentDate);
        } else {
          this.currentDate = this.formatDateForInput(today);
          console.log('使用系统日期:', this.currentDate);
        }
        
        this.loadRecords();
        this.startAutoRefresh();
      } catch (error) {
        console.error('初始化页面出错:', error);
        // 默认使用2023年7月16日
        this.currentDate = '2023-07-16';
        this.loadRecords();
        this.startAutoRefresh();
      }
    },

    // 开始自动刷新
    startAutoRefresh() {
      // 清除之前的定时器
      this.stopAutoRefresh()

      // 每分钟更新当前时间（用于计算时间间隔）
      this.timeUpdateTimer = setInterval(() => {
        this.currentTime = new Date()
      }, 60000)

      // 每5分钟自动刷新记录
      this.autoRefreshTimer = setInterval(() => {
        this.refreshRecords()
      }, 5 * 60 * 1000)
    },

    // 停止自动刷新
    stopAutoRefresh() {
      if (this.autoRefreshTimer) {
        clearInterval(this.autoRefreshTimer)
        this.autoRefreshTimer = null
      }
      if (this.timeUpdateTimer) {
        clearInterval(this.timeUpdateTimer)
        this.timeUpdateTimer = null
      }
    },

    // 格式化日期用于输入
    formatDateForInput(date) {
      try {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        console.log('格式化日期:', date, '结果:', formattedDate);
        return formattedDate;
      } catch (error) {
        console.error('日期格式化错误:', error, date);
        // 如果出错，返回当前日期
        return '2023-07-16'; // 默认日期
      }
    },

    // 格式化日期显示（年月日格式）
    formatDateDisplay(dateString) {
      try {
        if (!dateString) return '';
        
        const date = new Date(dateString);
        // 验证日期是否有效
        if (isNaN(date.getTime())) {
          console.error('无效的日期用于显示:', dateString);
          return '07月16日'; // 默认显示
        }
        
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${month}月${day}日`;
      } catch (error) {
        console.error('日期显示格式化错误:', error);
        return '07月16日'; // 默认显示
      }
    },

    // 日期滚动日历组件的change事件处理
    onDateChange(date) {
      console.log('日期变更:', date);
      
      try {
        // 验证日期格式是否正确
        const dateObj = new Date(date);
        if (isNaN(dateObj.getTime())) {
          console.error('无效的日期字符串:', date);
          return;
        }
        
        // 重新格式化日期，确保格式一致
        const year = dateObj.getFullYear();
        const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
        const day = dateObj.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        
        console.log('格式化后的日期:', formattedDate);
        this.currentDate = formattedDate;
        
        this.loadRecords();
      } catch (error) {
        console.error('日期变更处理错误:', error);
      }
    },

    // 加载特定日期的记录
    async loadRecords() {
      try {
        console.log('开始加载日期记录:', this.currentDate);
        
        uni.showLoading({
          title: '加载中...'
        });

        const result = await uniCloud.callFunction({
          name: 'milk-record-service',
          data: {
            action: 'get',
            data: {
              date: this.currentDate
            }
          }
        });

        uni.hideLoading();

        if (result.result.success) {
          console.log('获取记录成功，原始数据:', result.result.data);
          this.records = result.result.data || [];
          this.records.sort((a, b) => {
            // 创建完整的日期时间进行比较
            const aDateTime = new Date(`${a.date}T${a.time}`);
            const bDateTime = new Date(`${b.date}T${b.time}`);
            return bDateTime - aDateTime;
          });
          console.log('排序后的记录:', this.records.map(r => `${r.date} ${r.time}`).join(', '));
        } else {
          throw new Error(result.result.message || '获取记录失败');
        }
      } catch (error) {
        uni.hideLoading();
        console.error('加载记录失败:', error);
        uni.showToast({
          title: '加载记录失败',
          icon: 'error'
        });
        this.records = [];
      }
    },

    // 刷新记录
    async refreshRecords() {
      if (this.isRefreshing) return;

      this.isRefreshing = true;
      console.log('刷新记录，当前日期:', this.currentDate);

      try {
        const result = await uniCloud.callFunction({
          name: 'milk-record-service',
          data: {
            action: 'get',
            data: {
              date: this.currentDate
            }
          }
        });

        if (result.result.success) {
          console.log('刷新成功，获取记录数量:', result.result.data ? result.result.data.length : 0);
          this.records = result.result.data || [];
          this.records.sort((a, b) => {
            // 创建完整的日期时间进行比较
            const aDateTime = new Date(`${a.date}T${a.time}`);
            const bDateTime = new Date(`${b.date}T${b.time}`);
            return bDateTime - aDateTime;
          });

          uni.showToast({
            title: '刷新成功',
            icon: 'success',
            duration: 1000
          });
        } else {
          throw new Error(result.result.message || '刷新失败');
        }
      } catch (error) {
        console.error('刷新记录失败:', error);
        uni.showToast({
          title: '刷新失败',
          icon: 'error'
        });
        this.records = [];
      } finally {
        // 延迟恢复按钮状态，让用户看到旋转动画
        setTimeout(() => {
          this.isRefreshing = false;
        }, 500);
      }
    },

    // 编辑记录
    editRecord(record) {
      this.editingRecord = { ...record }
      // 将时间字符串转换为Date对象
      const time = record.time || '08:00';
      const [hour, minute] = time.split(':');
      const date = new Date();
      date.setHours(parseInt(hour), parseInt(minute), 0, 0);
      this.tempTime = date;
      this.$refs.editPopup.open()
    },

    // 关闭编辑模态框
    closeEditModal() {
      this.$refs.editPopup.close()
    },

    // 保存编辑后的记录
    async saveEditedRecord() {
      if (!this.editingRecord.amount) {
        uni.showToast({
          title: '请输入喝奶量',
          icon: 'error'
        })
        return
      }

      const amount = parseInt(this.editingRecord.amount)
      if (isNaN(amount) || amount < 1 || amount > 999) {
        uni.showToast({
          title: '奶量范围为1-999ml',
          icon: 'error'
        })
        return
      }
      if (!this.editingRecord.feeding_type) {
        uni.showToast({
          title: '请选择喂养类型',
          icon: 'error'
        })
        return
      }

      try {
        uni.showLoading({
          title: '更新中...'
        })

        const result = await uniCloud.callFunction({
          name: 'milk-record-service',
          data: {
            action: 'update',
            data: {
              id: this.editingRecord._id,
              updateData: {
                date: this.currentDate,
                amount: amount,
                time: this.editingRecord.time,
                notes: this.editingRecord.notes,
                feeding_type: this.editingRecord.feeding_type // 新增：喂养类型
              }
            }
          }
        })

        uni.hideLoading()

        if (result.result.success) {
          // 重新加载记录
          await this.loadRecords()
          this.closeEditModal()

          uni.showToast({
            title: '记录更新成功',
            icon: 'success'
          })
        } else {
          throw new Error(result.result.message || '更新记录失败')
        }
      } catch (error) {
        uni.hideLoading()
        console.error('更新记录失败:', error)
        uni.showToast({
          title: '更新记录失败',
          icon: 'error'
        })
      }
    },

    // 删除记录
    deleteRecord() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条记录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '删除中...'
              })

              const result = await uniCloud.callFunction({
                name: 'milk-record-service',
                data: {
                  action: 'delete',
                  data: {
                    id: this.editingRecord._id
                  }
                }
              })

              uni.hideLoading()

              if (result.result.success) {
                // 重新加载记录
                await this.loadRecords()
                this.closeEditModal()

                uni.showToast({
                  title: '记录删除成功',
                  icon: 'success'
                })
              } else {
                throw new Error(result.result.message || '删除记录失败')
              }
            } catch (error) {
              uni.hideLoading()
              console.error('删除记录失败:', error)
              uni.showToast({
                title: '删除记录失败',
                icon: 'error'
              })
            }
          }
        }
      })
    },

    // 验证编辑奶量输入
    validateEditAmount(e) {
      let value = e.detail.value
      // 限制输入范围 1-999
      if (value && (parseInt(value) < 1 || parseInt(value) > 999)) {
        uni.showToast({
          title: '奶量范围为1-999ml',
          icon: 'none'
        })
        // 如果超出范围，保持原值或设为空
        if (parseInt(value) > 999) {
          this.editingRecord.amount = '999'
        } else if (parseInt(value) < 1) {
          this.editingRecord.amount = '1'
        }
      }
    },

    // 导航到奶瓶选择器页面
    navigateToFeedingRecord() {
      // 跳转到自定义奶瓶选择器页面，带上当前选中的日期参数
      uni.navigateTo({
        url: `/pages/bottle-selector/bottle-selector?date=${encodeURIComponent(this.currentDate)}`,
        success: () => {
          console.log('成功跳转到奶瓶选择器页面')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          })
        }
      })
    },

    // 导航到趋势图表页面
    navigateToTrendChart() {
      uni.navigateTo({
        url: '/pages/milk-trend-chart/milk-trend-chart',
        success: () => {
          console.log('成功跳转到趋势图表页面')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          })
        }
      })
    },
    
    // 导航到奶瓶演示页面
    navigateToBottleDemo() {
      uni.navigateTo({
        url: '/pages/bottle-demo/bottle-demo',
        success: () => {
          console.log('成功跳转到奶瓶演示页面')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          })
        }
      })
    },

    // 导航到母婴助手页面
    navigateToAIAssistant() {
      uni.navigateTo({
        url: '/pages/ai-assistant/ai-assistant',
        success: () => {
          console.log('成功跳转到母婴助手页面')
        },
        fail: (error) => {
          console.error('跳转失败:', error)
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          })
        }
      })
    },

    // 时间选择变化处理
    onTimeChange(e) {
      console.log('时间变化:', e);
      // 直接设置编辑记录的时间
      this.editingRecord.time = e.detail.value;
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #1c1d30; /* 深色背景 */
  min-height: 100vh;
  height: 100vh;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden; /* 防止整体滚动 */
}

/* 固定内容区域 */
.fixed-content {
  flex-shrink: 0; /* 不允许收缩 */
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许垂直滚动 */
  -webkit-overflow-scrolling: touch; /* 平滑滚动 */
  display: flex;
  flex-direction: column;
}

/* 简化背景效果 */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1c1d30;
  z-index: -1;
}

.date-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
  border: 1rpx solid rgba(255, 105, 180, 0.15);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  flex-wrap: nowrap;
  width: 100%;
}

.date-header .section-title {
  flex: 1;
}

.section-title {
  font-size: clamp(30rpx, 5vw, 36rpx);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

/* 编辑模态框样式 */
.edit-modal {
  width: 90vw;
  max-width: 600rpx;
  max-height: 85vh;
  background: #1f1e29;
  border-radius: 30rpx;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5), 0 1rpx 0 1rpx rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  width: 100%;
  position: relative;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  margin: 0 auto 0 0;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(72, 67, 90, 0.7);
  border-radius: 30rpx;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 40rpx;
  top: 40rpx;
}

.close-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  padding: 40rpx 50rpx 30rpx;
  background: #1f1e29;
  max-height: 65vh;
  overflow-y: auto;
}

.input-group {
  margin-bottom: 35rpx;
}

.input-group:last-child {
  margin-bottom: 20rpx;
}

.label {
  display: block;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18rpx;
  font-weight: 600;
}

.input, .time-picker {
  width: 100%;
  height: 80rpx;
  background: #2d2b39;
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 25rpx;
  background: #2d2b39;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.input-placeholder, .textarea-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
  padding: 30rpx 50rpx 35rpx;
  border-top: 2rpx solid rgba(255, 255, 255, 0.1);
  background: #1f1e29;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
}

.modal-buttons .save-btn,
.modal-buttons .delete-btn {
  flex: 1;
}

.save-btn {
  padding: 18rpx;
  background: linear-gradient(135deg, #ff7b9c, #ff4281);
  color: white;
  border: none;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 66, 129, 0.4);
  min-height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.save-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(255, 105, 180, 0.5);
}

.delete-btn {
  padding: 18rpx;
  background: rgba(72, 67, 90, 0.7);
  color: rgba(255, 255, 255, 0.8);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 500;
  min-height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.delete-btn:active {
  background: rgba(72, 67, 90, 0.9);
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

/* 时间选择器深色样式 */
.time-picker-dark {
  background: #2d2b39 !important;
  border: 1rpx solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.time-picker-dark text {
  color: rgba(255, 255, 255, 0.9) !important;
}

.time-picker-dark .arrow {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 按钮样式 */
.action-btn {
  min-width: 110rpx;
  padding: 0 20rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 107, 157, 0.15);
  border-radius: 15rpx;
  border: none;
  color: white;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-btn:active {
  transform: scale(0.95);
}

/* 实验室按钮样式 */
.lab-btn {
  background: rgba(102, 126, 234, 0.15);
}

/* AI按钮样式 */
.ai-btn {
  background: rgba(80, 200, 120, 0.15);
}

/* 喂养类型标签样式 */
.feeding-type-tabs {
  display: flex;
  gap: 15rpx;
  margin-bottom: 25rpx;
  background: #2d2b39;
  border-radius: 16rpx;
  padding: 5rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.feeding-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.feeding-tab.active {
  background: linear-gradient(135deg, #ff7b9c, #ff4281);
  color: white;
  box-shadow: 0 4rpx 15rpx rgba(255, 66, 129, 0.3);
}

.feeding-tab.active .tab-active-indicator {
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: white;
  border-radius: 3rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.feeding-tab:active {
  transform: scale(0.98);
}

/* 新增样式 */
.form-section {
  margin-bottom: 35rpx;
}

.form-label {
  display: block;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18rpx;
  font-weight: 600;
}

.time-picker {
  width: 100%;
  height: 80rpx;
  background: #2d2b39;
  border-radius: 16rpx;
  border: 1rpx solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.time-text {
  flex: 1;
  text-align: left;
}

.time-arrow {
  color: rgba(255,255,255,0.5);
  font-size: 24rpx;
}



@media (max-width: 400rpx) {
  .container {
    padding: 15rpx;
  }
  
  .date-section {
    padding: 20rpx;
  }
}

/* 平板适配样式 */
@media (min-width: 768px) {
  .custom-time-picker {
    max-width: 600px;
    margin: 0 auto;
    padding: 50rpx 40rpx;
    border-radius: 40rpx 40rpx 0 0;
  }
  
  .time-picker-title {
    font-size: 36rpx;
  }
  
  .cancel-btn, .confirm-btn {
    font-size: 32rpx;
    padding: 15rpx;
  }
  
  :deep(.uni-datetime-picker-view) {
    height: 500rpx !important;
  }
  
  :deep(.uni-datetime-picker-item) {
    font-size: 32rpx !important;
  }
}

/* 平板弹窗内容适配 */
@media (min-width: 768px) {
  .edit-modal {
    max-width: 800px !important;
    width: 80vw !important;
  }
  
  .modal-content {
    padding: 50rpx 60rpx 40rpx !important;
  }
  
  .input, .time-picker {
    height: 100rpx !important;
    font-size: 36rpx !important;
  }
  
  .label {
    font-size: 34rpx !important;
    margin-bottom: 20rpx !important;
  }
  
  .modal-title {
    font-size: 40rpx !important;
  }
  
  .close-btn {
    width: 80rpx !important;
    height: 80rpx !important;
    font-size: 36rpx !important;
  }
  
  .save-btn, .delete-btn {
    min-height: 90rpx !important;
    font-size: 30rpx !important;
  }
  
  /* 平板按钮适配 */
  .action-btn {
    min-width: 140rpx !important;
    height: 80rpx !important;
    font-size: 28rpx !important;
  }
  
  /* 平板喂养类型标签适配 */
  .feeding-tab {
    padding: 15rpx 30rpx !important;
    font-size: 32rpx !important;
  }
  
  /* 平板统计卡片适配 */
  .stats-card {
    padding: 40rpx !important;
  }
  
  /* 平板日期选择器适配 */
  .date-scroll-calendar {
    padding: 30rpx !important;
  }
}

/* 大屏平板适配 */
@media (min-width: 1024px) {
  .tablet-time-picker {
    max-width: 700px !important;
  }
  
  .edit-modal {
    max-width: 900px !important;
  }
  
  .tablet-datepicker {
    font-size: 20px !important;
  }
}

/* 强制覆盖NutUI时间选择器样式 */
:deep(.nut-picker__title) {
  font-size: 24px !important;
  font-weight: 600 !important;
}

:deep(.nut-picker__left),
:deep(.nut-picker__right) {
  font-size: 22px !important;
  font-weight: 500 !important;
}

:deep(.nut-picker-item) {
  font-size: 22px !important;
  font-weight: 500 !important;
}

:deep(.nut-picker__columnitem .nut-picker-item) {
  font-size: 24px !important;
  font-weight: 600 !important;
}

:deep(.nut-picker__columnitem .nut-picker-item--active) {
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* 平板强制覆盖 */
@media (min-width: 768px) {
  :deep(.nut-picker__title) {
    font-size: 28px !important;
  }
}

/* 大屏平板强制覆盖 */
@media (min-width: 1024px) {
  :deep(.nut-picker__title) {
    font-size: 32px !important;
  }
  
  :deep(.nut-picker__left),
  :deep(.nut-picker__right) {
    font-size: 26px !important;
  }
  
  :deep(.nut-picker-item) {
    font-size: 26px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item) {
    font-size: 30px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item--active) {
    font-size: 36px !important;
  }
}
</style> 